<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/app-route/app-location.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/iron-media-query/iron-media-query.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">

<link rel="import" href="../forest_detail_panel/forest-detail-panel.html">
<link rel="import" href="../forest_map/forest-map.html">
<link rel="import" href="../forest_picker_panel/forest-picker-panel.html">


<dom-module id="forest-app">
  <style is="custom-style">
    /* Global variables. */
    :root {
      /* App-wide colors. */
      --primary-color: white;
      --secondary-color: var(--paper-teal-100);
      --primary-background-color: var(--paper-grey-700);
      --primary-text-color: var(--primary-color);
      --secondary-text-color: var(--secondary-color);
      --error-color: var(--paper-red-200);

      /* Control-specific color overrides. */
      --paper-slider-active-color: var(--paper-teal-100);
      --paper-slider-knob-color: var(--paper-teal-100);
      --paper-input-container-focus-color: var(--paper-teal-100);
      --paper-input-container-color: var(--primary-color);

      /* Heights with multiple dependencies. */
      --picker-height: 200px;
      --picker-mobile-height: 172px;
      --paper-toolbar-height: 64px;
    }

    /* App-wide styles. */
    :host ::content * {
      color: var(--primary-text-color);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-weight: 600;
    }

    :host ::content a {
      color: var(--secondary-color);
    }

    :host ::content p {
      margin: 0;
    }

    :host ::content paper-material {
      background-color: var(--primary-background-color);
      box-sizing: border-box;
      padding: 16px;
    }

    /* Rules for short displays. */
    .main[short-viewport] .top {
      height: 100%;
      width: 100%;
    }

    /* Rules for narrow displays. */
    .main[narrow-viewport] .top {
      position: fixed;
      height: calc(100% - var(--picker-mobile-height));
      width: 100%;
    }

    .main[narrow-viewport] .top forest-map {
      @apply(--layout-fit);
    }

    .main[narrow-viewport] .bottom {
      position: fixed;
      height: calc(100% - var(--paper-toolbar-height));
      width: 100%;
      top: calc(100% - var(--picker-mobile-height));
      overflow: hidden;
    }

    .main[narrow-viewport] .bottom[expanded] {
      top: var(--paper-toolbar-height);
    }

    .main[narrow-viewport] .bottom forest-detail-panel {
      height: calc(100% - var(--picker-mobile-height));
    }

    /* Rules for larger screens. */
    .main:not([narrow-viewport]) {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .main:not([narrow-viewport]) .top {
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      align-items: stretch;
    }

    .main:not([narrow-viewport]) .top forest-map {
      flex-grow: 1;
      position: relative;
    }

    .main:not([narrow-viewport]) .top forest-detail-panel {
      flex-basis: 360px;
    }

    /* Base rules. */
    :host {
      overflow: hidden;
    }

    .bottom forest-picker-panel {
      width: 100%;
    }

    .title-toolbar {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: var(--toolbar-translucent-dark-color);
    }

    .title-toolbar .title {
      margin-left: 0;
      line-height: 24px;
      flex: auto;
    }

    .title-toolbar .about {
      margin-right: 10px;
    }

    /* Stacking order. */
    .title-toolbar {
      z-index: 1;
    }

    forest-map ::content forest-controls,
    forest-map ::content forest-layer-panel,
    forest-map ::content forest-search-panel {
      z-index: 2;
    }

    .bottom {
      z-index: 3;
    }

    a.about {
      color: var(--primary-text-color);
      text-decoration: none;
    }

    .action-button {
      font-size: 14px;
      line-height: 28px;
      font-weight: 500;
      padding: 0.2em 0.97em;
      color: white;
      background-color: var(--paper-teal-400);
    }
  </style>

  <template>
    <iron-media-query query="(max-width: 720px)" query-matches="{{narrowViewport}}">
    </iron-media-query>
    <iron-media-query query="(max-height: 400px)" query-matches="{{shortViewport}}">
    </iron-media-query>

    <carbon-location route="{{route_}}" use-hash-as-path></carbon-location>

    <paper-toolbar class="title-toolbar">
      <div class="title">Global Forest Change Explorer</div>
      <a class="about" href="http://globalforestchange.org">
        <template is="dom-if" if="{{!narrowViewport}}">
          <paper-button class="about action-button">About</paper-button>
        </template>
        <template is="dom-if" if="{{narrowViewport}}">
          About
        </template>
      </a>
    </paper-toolbar>

    <div class="main" narrow-viewport$={{narrowViewport}} short-viewport$={{shortViewport}}>
      <div class="top">
        <forest-map
            id="map"
            narrow-viewport$={{narrowViewport}} short-viewport$={{shortViewport}}
            observe="curDestinationDetails.geoQuery, curDestinationDetails.boundingBox"
            geo-query="{{curDestinationDetails.geoQuery}}"
            bounding-box="{{curDestinationDetails.boundingBox}}">
        </forest-map>

        <template is="dom-if" if="{{!narrowViewport}}">
          <forest-detail-panel
              narrow-viewport$={{narrowViewport}}
              cur-destination-details="[[curDestinationDetails]]"
              on-left-tap="selectPreviousDestination_"
              on-right-tap="selectNextDestination_">
          </forest-detail-panel>
        </template>
      </div>

      <div class="bottom" hidden$="{{shortViewport}}" expanded$={{expanded_}}>
        <forest-picker-panel id="pickerPanel"
            narrow-viewport$={{narrowViewport}}
            expanded$={{expanded_}}
            cur-destination-details="{{curDestinationDetails}}"
            on-repeat-tap="toggleMobileDrawer_">
        </forest-picker-panel>

        <template is="dom-if" if="{{narrowViewport}}">
          <forest-detail-panel
              narrow-viewport$={{narrowViewport}}
              cur-destination-details="[[curDestinationDetails]]"
              on-left-tap="selectPreviousDestination_"
              on-right-tap="selectNextDestination_">
          </forest-detail-panel>
        </template>
      </div>
    </div>
  </template>
  <script src="forest-app.js"></script>
</dom-module>
